import { SearchOutlined } from "@ant-design/icons";
import { Divider, Input, List, Space, Tooltip } from "antd";
import React, { useMemo } from "react";

const FieldSelect = ({ value, onClick, options, style, bodyStyle }) => {
    const [searchValue, setSearchValue] = React.useState('')

    const computedOptions = useMemo(() => {
        return options?.filter((item) => {
            return item.label?.toLowerCase()?.includes(searchValue?.toLowerCase())
        })
    }, [searchValue, options])

    return <div style={{ height: '100%', ...style }}>
        <Input bordered={false} placeholder="请输入关键字搜索"
            prefix={<SearchOutlined />} value={searchValue}
            onChange={e => setSearchValue(e.target.value)} />
        <Divider style={{ margin: 3 }} />
        <List dataSource={computedOptions} renderItem={(item) => {
            return <div style={{ marginTop: 5, cursor: 'pointer', marginLeft: 20 }} onClick={e => onClick(item)}>
                <Space>
                    {item.icon}
                    <Tooltip title={item.label}>
                        <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                            {item.label}
                        </span>
                    </Tooltip>
                </Space>
            </div>
        }} style={bodyStyle} />
    </div>
}
export default FieldSelect;